import QtQuick 2.0
import QtQuick.Controls 2.5

Rectangle {
    id:root

    border.width: 5
    border.color: "grey"
    radius:10
    color: Qt.rgba(0, 0, 0, 0) // 设置颜色为完全透明
    z:100

    signal againPractise(); // 再一次练习信号
    signal returnMenu();    // 返回菜单信号

    // 用于标志是要发射 againPractise信号，还是returnMenu信号
    property int flag:0;    // 0 就发射againPractise信号，1是returnMenu信号

    Image{
        id:img
        width: 100
        source: "qrc:/Images/victory.png"
        fillMode: Image.PreserveAspectFit

        anchors.top: root.top
        anchors.topMargin: 20
        anchors.horizontalCenter: root.horizontalCenter
    }

    ListModel{  // 创建一个 ListModel
        id:btnInfoModel
        ListElement{ name : "againBtn" ; btnContent : "再来一次" }
        ListElement{ name : "returnMenuBtn" ; btnContent : "返回菜单" }
        ListElement{ name : "quitBtn" ; btnContent : "退出练习" }
    }

    // 动态创建 按钮
    Column{
        spacing: 15
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 25

        Repeater{
            model:btnInfoModel

            delegate:delegateRect
        }
    }

    Component{
        id:delegateRect

        // 这是一个按钮
        Rectangle{
            id:parentRect
            x:25
            width:root.width - 50
            height: 50
            radius: 20
            color: "lightBlue"

            objectName: btnInfoModel.get(index).name


            Text{
                id:aText
                text: btnInfoModel.get(index).btnContent
                font.pixelSize: 28
                font.family:"STXinwei"  // 华文新魏字体
                anchors.centerIn: parent
            }



            MouseArea{
                id:mouseArea
                anchors.fill: parent
                // 该属性设置为false的话，则鼠标的进入 离开 移动不能捕获到
                hoverEnabled: true

                onClicked: {
                    function onClickSlot(){
                        var name = parentRect.objectName
                        if("againBtn" === name){
                            console.log("againBtn")
                            flag = 0;
                            anim.start();
                        }else if("returnMenuBtn" === name){
                            console.log("returnMenuBtn")
                            flag = 1;
                            anim.start();
                        }else {
                            console.log("quit")
                            Qt.quit();
                        }
                    }
                    onClickSlot();
                }

                // 当鼠标滑入时，让被滑入的 StartBoxBtn 有不同的样式
                onEntered:{

                    parentRect.width += 10
                    parentRect.x -= 5
                    parentRect.height += 10
                    parentRect.y += 5
                    parentRect.color = Qt.rgba(0, 191, 255, 1)

                    aText.font.pixelSize += 5

                }

                // 当鼠标离开时，让被离开的 StartBoxBtn 恢复以前的样式
                onExited: {

                    parentRect.width -= 10
                    parentRect.x += 5
                    parentRect.height -= 10
                    parentRect.y -= 5
                    parentRect.color = "lightBlue"

                    aText.font.pixelSize -= 5
                }
            }


        }

    }

    ParallelAnimation{
        id:anim

        RotationAnimation{
            target: root
            from:0
            to:360
            duration: 1000
        }

        PropertyAnimation{
            target:root
            property: "scale"
            from:1.0
            to:0
            duration: 1000
        }

        PropertyAnimation{
            target:root
            property: "opacity"
            from:1.0
            to:0.5
            duration: 1000
        }

        onStopped: {
            // 这两个信号如果在前面发，这个动画效果就会被跳过
            if(!flag) againPractise();
            else returnMenu();
            this.destroy();
        }
    }

}
